import React, { Component } from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import "./index.less"
const code = `## Title

\`\`\`jsx
function Demo() {
  return <div>demo</div>
}
\`\`\`

\`\`\`bash
# Not dependent on uiw.
npm install @codemirror/lang-markdown --save
npm install @codemirror/language-data --save
\`\`\`

[weisit ulr](https://uiwjs.github.io/react-codemirror/)

\`\`\`go
package main
import "fmt"
func main() {
  fmt.Println("Hello, 世界")
}
\`\`\`
`;

interface Props {
  name: string;
}

interface State {
  editorState: EditorState;
}

class HomePage extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);   
  }

  state = {
    editorState: EditorState.createEmpty(),
  }

  onEditorStateChange: Function = (editorState: EditorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    const { name } = this.props;
    const { editorState } = this.state;



    return (
      <div>
        <Editor
          editorState={editorState}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          toolbarHidden={true}
          onEditorStateChange={this.onEditorStateChange}
        />
      </div>
    );
  }
}
export default HomePage;


